<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">

	<head>
		<meta charset="utf-8" />
		<title>图书管理系统</title>
	</head>
	<style type="text/css">
		/*全局设置*/
		
		* {
			margin: 0;
			padding: 0;
		}
		/*顶部栏*/
		
		.g-top {
			width: 100%;
			height: 75px;
			position: fixed;
			top: 0;
			background-color: grey;
			border-bottom: 1px solid black;
			box-shadow:4px 2px 6px  #000000;
		}
		/*中间内容*/
		
		.g-body {
			margin-top: 75px;
			width: 70%%;
			min-height: 700px;
			margin-left: 15%;
			border-left: 2px solid black;
			background-image: url(/image/0.jpg);
		}
		/*脚部*/
		
		.g-foot {
			width: 85%;
			height: 70px;
			position: fixed;
			bottom: 0;
			left: 15.2%;
			background-color: white;
			opacity: 0.3;
		}
		/*脚部文字*/
		
		.u-btm {
			text-align: center;
			margin-top: 30px;
		}
		/*导航主题,列表，登录*/
		
		.u-title {
			width: 30%;
			float: left;
			margin-bottom: 16px;
		}
		
		.u-title> h1 {
			text-align: center;
			font-family: "book antiqua";
			font-size: 30px;
			margin-top: 20px;
		}
		
		.u-login {
			width: 20%;
			float: right;
			text-align: center;
			padding-top: 30px;
		}
		/*清除浮动*/
		
		.u-space {
			clear: both;
		}
		
		a {
			text-decoration: none;
			color: #000000;
		}
		/*导航栏*/
		
		.m-navi {
			text-align: center;
			position: fixed;
			top: 75px;
			width: 15%;
			height: 100%;
			background-color: #265A88;
		}
		.m-navi > li:nth-child(5){
			background-color: #C4E3F3;
		}
		.m-navi > li:hover{
			box-shadow:4px 2px 6px  #000000;
		}
		.m-navi> li {
			height: 30px;
			padding-top: 15px;
			list-style: none;
		}
		
		.m-navi> li>a {
			display: block;
		}
		
		.m-navi> li:hover {
			background-color: #C4E3F3;
		}
		/*表格*/
		.m-list {
			width: 500px;
			height: auto;
			text-align: center;
		}
		
		/*主体内容*/
		.u-text{
			display: block;
			padding-top: 50px;
			margin-left: 10%;
		}
		
		
		/*列表*/
		th{
			min-width: 100px;
			padding: 5px;
			background-color: #737373;
			color: white;
		}
		td{
			min-width: 100px;
			padding: 3px;
		}
		
	</style>

	<body>
		<div class="g-top">
			<div class="u-title">
				<h1>图书管理系统</h1>
			</div>
			<div class="u-login">
				<a href="/">进入主页</a>
			</div>
			<div class="u-space"></div>
		</div>

		<ul class="m-navi">
			<li>
				<a href="/hou">首页</a>
			</li>
			<li>
				<a href="/addBooks">添加</a>
			</li>
			<li>
				<a href="/booksList">列表</a>
			</li>
			<li>
				<a href="/classM">分类管理</a>
			</li>
			<li>
				<a href="/bringM">借阅管理</a>
			</li>
		</ul>

		<div class="g-body">
			<div class="u-text" style="text-align: center;">
				<table border="1" cellspacing="0" cellpadding="4">
					<tr>
						<th>ID</th>
						<th>借阅书名</th>
						<th>学号</th>
						<th>姓名</th>				
						<th>班级</th>
						<th>操作</th>
					</tr>
					<tr th:each="book,iterState:${books}">
						<td th:text="${book.id}">Data</td>
						<td th:text="${book.name}">Data</td>
						<td th:text="${book.student.num}">Data</td>
						<td th:text="${book.student.name}">Data</td>
						<td th:text="${book.student.classes}">Data</td>
						<td>
							<a th:attr="href='/return/'+${book.id}">还书</a>
						</td>
					</tr>
				</table>
			</div>
		</div>

		<div class="g-foot">
			<hr />
			<p class="u-btm">@2017西南科技大学网站设计布局样式</p>
		</div>
	</body>
    
    
</html>